<template>
	<view class="mh100 pb115 ">
		<view class="p010">
			<view class="mi1c p3 bs15 mt10 f-col" :style="{background:bg}">
				<view class="f-row">
					<view class="f-col f-g-1">
						<view class="f-col">
							<view class="f44 wei">{{result.money}}</view>
							<view>可提现余额（元）</view>
						</view>
					</view>
					<view class="f-g-1 t-r">
						<view class="dis-in border-btn" @click="go({t:1,url:'/yb_shd/my/wallet/index'})">提现</view>
					</view>
				</view>
				<view class="f-x-bt f32" style="margin-top: 70rpx;">
					<view class="f-c" @click="go({t:1,url:'/yb_shd/dp/statement/balance-flow'})">
						<view style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"><mg-img src="/static/img/wallet/cash_out.png" /></view>
						<view>余额流水</view>
					</view>
					<view class="f-c">
						<view style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"><mg-img src="/static/img/wallet/cash_account.png" /></view>
						<view>查看账户</view>
					</view>
					<view class="f-c" @click="go({t:1,url:'/yb_shd/dp/statement/order-query'})">
						<view style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"><mg-img src="/static/img/wallet/cash_capital.png" /></view>
						<view>订单查询</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="f-x-bt" @click="go({t:1,url:'/yb_shd/dp/statement/bill-detail?time=' + result.todayList.list[0].day})">
					<view class="f-yc">
						<text class="f34">今日实时账单（单位/元）</text>
						<text class="f24 c9">{{result.todayList.list[0].day}}</text>
					</view>
					<view>
						<text class="cf7">￥{{result.todayList.list[0].money}}</text>
						<text class="iconfont iconright cf7 f22 ml5"/>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="c0 f32">交易概况</view>
				<view class="charts-line">
					<qiun-data-charts
						canvasId="indexline"
						:canvas2d="true"
						type="line"
						:chartData="LineData"
						background="none"
						:tapLegend="false"
						tooltipFormat="tooltipDemo2"
					/>
				</view>
			</view>
			<view class="card">
				<view class="w100 f-bt mt30 pb30">
					<view class="c0 f32">历史账单<text class="f26 c9 ml20">单位/元</text></view>
					<!-- <view class="c9">全部历史账单></view> -->
				</view>
				<scroll-view scroll-y @scrolltolower="nextPage" style="height: 320rpx;">
					<view @click="go({t:1,url:'/yb_shd/dp/statement/bill-detail?time=' + item.day})" v-for="item in result.allList.list" :key="item.day" class="f-bt wei bt-fa" style="padding: 30rpx 20rpx 30rpx 0;">
						<text>{{item.day}}</text>
						<text>{{item.money}}<text class="iconfont iconright c9 f22 ml5" style="margin-top: 0;" /></text>
					</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import util from '@/common/utils.js'
	import qiunDataCharts from '@/yb_shd/dp/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			qiunDataCharts
		},
		name: 'my-index',
		data() {
			return {
				getFlag:false,
				LineData:null,
				result: {
					money:'0.00',
					allList:{}
				},
				query:{
					page:1,
					startTime:'',
					endTime:'',
					timeType:"0"
				},
			};
		},
		computed: {
			bg(){
				return `linear-gradient(90deg, ${util.jjldColor(this.tColor,40)}, ${this.tColor})`
			}
		},
		onLoad(options) {
			this.util.setNT('对账首页');
			this.getData()
		},
		methods: {
			// ...mapMutations(['delAccount', 'removeAccount']),
			goDl(v) {
				this.go({
					t: 1,
					url: v.url
				});
			},
			async nextPage(){
				if(this.getFlag){
					return
				}
				this.getFlag = true
				this.query.page++
				let list =	await this.getData('nextPage')
				if(list.length){
					 this.result.allList.list = this.result.allList.list.concat(list)
					 this.getFlag = false
				 }
			},
			async getData(type) {
				try{
				let {data} = await this.util
						.request({
							url: this.api.statementAssetOverview,
							method: 'POST',
							data:this.query
						})
						if(type === 'nextPage'){
							return data.allList.list
						}else{
							this.result = data;
						}
						this.getChartData(data)
						this.showloading = false;
						
				}catch(e){
					//TODO handle the exception
					this.util.message(e.msg, 3);
					this.showloading = false;
				}
			},
			getChartData(data) {
				var LineData = {
					categories: [],
					series: []
				};
				LineData.categories = data.payMoneyArr.map(element => {
					return element.hours.replace(/(\d{4})-/, '')
				})
				// 支付金额
				var totalMoney = data.payMoneyArr.map(element => {
					return element.money
				})
				// 有效订单数
				var effective = data.effectiveArr.map(element => {
					return element.money
				})
				LineData.series = [{
						name: "支付金额",
						"lineType": "dash",
						"dashLength": "4",
						data: totalMoney,
						legendShape: 'square'
					},
					{
						name: "有效订单数",
						"lineType": "dash",
						"dashLength": "4",
						data: effective,
						legendShape: 'square'
					}
				]
				this.LineData = LineData
			},
		}
	};
</script>
<style scoped lang="scss">
	.border-btn{
		font-size: 30rpx;
		border: 1px solid rgba($color: #000000, $alpha: .4);
		padding: 10rpx 35rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.mi1c {
		min-height: 280rpx;
	}
	.card{
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #FFF;
	}
	.charts-line{
		width: 690rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}
</style>